<template>
  <div id="app">
    <!-- 需要缓存 放入keep-alive -->
    <keep-alive v-if="$route.meta.keep">
      <router-view class="pages has-tabbar" 
      :class="{'has-tabbar':!$route.meta.noTabBar}"/>
    </keep-alive>  
    <router-view v-else class="pages has-tabbar" 
      :class="{'has-tabbar':!$route.meta.noTabBar}"/>
    <!-- 不需要缓存 放在keep-alive外面 -->
    <TabBar class="tabbar" v-if="!$route.meta.noTabBar"></TabBar>
  </div>
</template>
<script>
// 导入底部栏组件
import TabBar from './components/TabBar.vue';
export default {
    // 注册底部栏组件
    components:{TabBar},
    created(){
      this.$store.dispatch("getCart")
      var user = JSON.parse(localStorage.getItem("userInfo")||"{}");
      // 进入到App，本地存储的user与用户信息转存到vuex
      this.$store.commit("SET_USER",user);
      this.$store.commit("SET_TOKEN",localStorage.getItem("token"));
    }
}
</script>
<style lang="scss">
#app{
  width:100%;
  height: 100vh;
  .pages{
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
  }
  .has-tabbar{
    bottom:1rem
  }
  .tabbar{
    position: fixed;
    left:0;
    bottom:0;
    width: 100%;
  }
}
#nprogress .bar {
  background: #f70 !important;
  }
#nprogress .peg {  
  box-shadow: 0 0 10px rgb(226, 173, 17), 0 0 5px rgb(224, 86, 18) !important;
}
</style>